<template>

    <!-- 面包屑区域 -->
    <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>
            <a href="/">基础数据</a>
        </el-breadcrumb-item>
        <el-breadcrumb-item>日志管理</el-breadcrumb-item>
    </el-breadcrumb>


    <!-- 搜索框区域 -->
    <div style="border: 1px solid #ccc; margin-top: 12px; padding: 10px;">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="日志内容">
                <el-input v-model="formInline.LogDes" placeholder="请输入日志内容" clearable />
            </el-form-item>

            <el-form-item label="操作人">
                <el-input v-model="formInline.Creator" placeholder="请输入操作人" clearable />
            </el-form-item>

            <el-form-item label="日志时间">
                <el-date-picker v-model="formInline.CreateTime" value-format="YYYY-MM-DD" type="date"
                    placeholder="请选择日志日期" clearable />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="search">查询</el-button>
                <el-button type="danger" @click="reSet">重置</el-button>
            </el-form-item>
        </el-form>
    </div>

    <!-- {{ tableData }} -->

    <!-- 数据展示区域 -->

    <div style="border: 1px solid #ccc; margin-top: 12px; padding: 10px;">

        <el-table :data="tableData" style="width: 100%">

            <el-table-column type="index" label="序号" width="120" />
            <el-table-column prop="id" label="日志编号" width="150" />

            <el-table-column prop="creator" label="操作人" width="120" />
            <el-table-column prop="logDes" label="日志内容" width="300" />
            <el-table-column prop="createTime" label="操作时间" width="260">
                <template v-slot="scope">
                    {{ moment(scope.row.createTime).format("YYYY-MM-DD HH:MM:ss") }}
                </template>
            </el-table-column>
        </el-table>
        <el-pagination v-model:current-page="page.PageIndex" v-model:page-size="page.PageSize" :page-sizes="[2, 3, 4, 5, 6]"
            next-text="下页" prev-text="上页" layout="total, sizes, prev, pager, next, jumper" :total="page.totalCount" />

    </div>



</template>



<script lang="ts" setup>
import axios from 'axios';
import { onMounted, reactive, ref, watch } from 'vue'
import moment from 'moment';

const formInline = reactive({
    LogDes: '',
    Creator: '',
    CreateTime: null,
})

const page = reactive({
    PageIndex: 1,
    PageSize: 6,
    totalCount: 0,
    totalPage: 0
})

watch(page, () => {
    search();
});

const tableData = ref([])

const search = () => {

    axios.get('http://localhost:5141/api/Log/SearchLog', {
        params: {
            LogDes: formInline.LogDes,
            Creator: formInline.Creator,
            CreateTime: formInline.CreateTime,
            PageIndex: page.PageIndex,
            PageSize: page.PageSize
        }
    }).then(res => {
        tableData.value = res.data.pageDatas;
        page.totalCount = res.data.totalCount;
    })
}
const reSet = () => {//重置
    formInline.CreateTime = null;
    formInline.Creator = '';
    formInline.LogDes = ''
}

onMounted(() => {
    search();
});

</script>

<style>
.demo-form-inline .el-input {
    --el-input-width: 220px;
}

.demo-form-inline .el-select {
    --el-select-width: 220px;
}
</style>